
<div id="view-panel" style="width:1058px; height:600px; margin-left:10px; overflow:hidden;">
  <div id="inner-panel" style="width:1058px;">
    <div id="page-1" class="pages rel" style="padding-bottom:2px; height:579px;">
      <div class="fLeft" style="margin:2px 15px 16px 7px;">
        <a href="#TB_inline?width=978&amp;height=380&amp;inlineId=image-<?php e($data[0]['image_id']); ?>" class="nounder" rel="sexylightbox[<?php e($data[0]['id']); ?>]" title="<?php e($data[0]['name']); ?>">
          <div class="bgWhite" style="width:618px; height:562px; text-align:center;">
<?php $filename = (file_exists(WWW_ROOT.'img'.DS.'events'.DS.'l_'.$data[0]['filename'])) ? 'l_'.$data[0]['filename'] : $data[0]['filename']; ?>
            <img src="<?php e($this->base); ?>/img/events/<?php e($filename); ?>" border="0" />
            <div id="main-feature" style="padding:0 20px 20px;">
              <h1><?php e($data[0]['name']); ?></h1>
              <span><?php e(nl2br($data[0]['description'])); ?></span>
            </div>
          </div>
        </a>
      </div>
      <div class="fLeft">
<?php for ($x=1; $x<count($data); $x++) { ?>
        <div class="water fLeft" style="margin:2px 15px 15px 0; width:194px; height:176px;">
          <a href="#TB_inline?width=978&amp;height=380&amp;inlineId=image-<?php e($data[$x]['image_id']); ?>" class="nounder" rel="sexylightbox[<?php e($data[$x]['id']); ?>]" title="<?php e($data[$x]['name']); ?>">
            <div class="thumb" style="background:url(<?php e($this->base); ?>/img/events/t_<?php e($data[$x]['filename']); ?>) center top no-repeat; width:194px; height:155px;"></div>
            <div class="thumbTitle" style="height:15px; padding-top:4px;"><?php e(htmlentities($data[$x]['name'])); ?></div>
          </a>
        </div>
<?php     if ($x%2 == 0) { ?>
        <div class="clear"></div>
<?php     }
      } ?>
      </div>
      <div class="clear"></div>
<?php if ($count > 6) { ?>
      <div class="abs navNext" style="right:42px;" onclick="next(1);">NEXT PAGE</div>
<?php } ?>
    </div>
  </div>
  <div class="clear"></div>
</div>
<div id="inlineContent" style="display:none;">
<?php foreach ($images as $album) {
          foreach ($album as $img) {
              $id  = $img['id'];
              $aid = $img['album_id'];
              $bg  = ($img['filename']) ? '<img src="'.$this->base.'/img/events/'.$img['filename'].'" />' : ''; ?>
  <a href="#TB_inline?width=978&amp;height=380&amp;inlineId=image-<?php e($id); ?>" rel="sexylightbox[<?php e($aid); ?>]" title="<?php e($img['title']); ?>">Show HTML</a>
  <div id="image-<?php e($id); ?>" class="fLeft">
    <div class="fLeft" style="width:570px; text-align:center;"><?php e($bg); ?></div>
    <div class="fLeft" style="padding:0 0 0 30px; width:378px; height:380px; overflow:auto; background-color:#fff;">
      <h1 class="popup" style="margin-top:0;"><?php e($img['title']); ?></h1><p class="popup"><?php e(nl2br($img['descr'])); ?></p>
    </div>
  </div>
  <div class="clear"></div>
<?php     }
      } ?>
</div>

<script type="text/javascript">
var _webroot = '<?php e($this->base); ?>';
var _data    = <?php e($json); ?>;

function init () {
    var perpage  = 15;
    var page     = 2;
    var loaded   = 0;
    var newcount = 0;
    var total    = _data.length;
    var elem     = Ext.get('inner-panel');
    var records  = '';
    var display  = '';
    var html     = '';
    var next     = '';
    var width    = (Math.ceil(total / perpage) + 1) * elem.getWidth();

    elem.setWidth(width);

    Ext.each(_data, function(dt){
        loaded++;
        newcount++;

        records += '<div class="water fLeft" style="width:194px; height:176px;">' +
                     '<a href="#TB_inline?width=978&amp;height=380&amp;inlineId=image-'+dt.image_id+'" class="nounder" rel="sexylightbox['+dt.id+']" title="'+dt.name+'">'+
                       '<div class="thumb" style="background:url('+_webroot+'/img/events/t_'+dt.filename+') center top no-repeat; width:194px; height:155px;"></div>'+
                       '<div class="thumbTitle" style="height:15px; padding-top:4px;">'+dt.name+'</div>'+
                     '</a>'+
                   '</div>';

        if (newcount % 5 == 0 || total == loaded) {
            records += '<div class="clear"></div>';
        }

        if (newcount == perpage || total == loaded) {
            next    = (total == loaded) ? '' : '<div class="abs navNext" style="right:18px;" onclick="next('+page+');">NEXT PAGE</div>';
            display = (Ext.isIE7 || Ext.isIE6) ? 'none' : 'block';
            html    = '<div id="page-'+page+'" class="pages rel" style="display:'+display+'; height:579px;">'+
                      '<div style="margin:2px 0 16px 13px;">'+records+'<div class="abs navPrev" style="left:15px;" onclick="prev('+page+');">PREVIOUS PAGE</div>'+next+'</div></div>';
            records = '';
            newcount = 0;

            elem.insertHtml('beforeEnd', html);
            page++;
        }

    });

    SexyLightbox.initialize({
        color: 'white',
        dir: _webroot+'/css/sexylightbox/',
        OverlayStyles : {
            'background-color': '#000',
            'opacity': 0.5
        }
    });
} // init

function next (page) {
    if (Ext.isIE7 || Ext.isIE6) {
        page++;
        Ext.select('div.pages', false, 'inner-panel').setStyle({ display:'none' });
        Ext.fly('page-'+page).slideIn('r', { easing:'easeOut' });
    } else {
        $('#view-panel').stop().scrollTo({ top:0, left:'+=1058' }, 500, { easing:'swing' });
    }
} // next

function prev (page) {
    if (Ext.isIE7 || Ext.isIE6) {
        page--;
        Ext.select('div.pages', false, 'inner-panel').setStyle({ display:'none' });
        Ext.fly('page-'+page).slideIn('l', { easing:'easeOut' });
    } else {
        $('#view-panel').stop().scrollTo({ top:0, left:'-=1058' }, 500, { easing:'swing' });
    }
} // prev

function lightbox (id) {
    if (Ext.fly('content-'+id) == null) {
        var html = '<div id="content-'+id+'"><div id="flash-'+id+'" style="margin-top:50px; font-size:15px;">' +
                   '<?php __('Photo viewer requires JavaScript and the Flash Player.'); ?> <a href="http://get.adobe.com/flashplayer/"><?php __('Get Flash'); ?></a>' +
                   '</div></div>';
        Ext.fly('inlineContent').insertHtml('beforeEnd', html);

        var flashvars = {};
        var params    = {};
        flashvars.galleryURL     = _webroot+'/albums/view/'+id+'.xml';
        params.allowfullscreen   = true;
        params.allowscriptaccess = 'always';
        params.bgcolor           = 'DCDDDF';
        swfobject.embedSWF(_webroot+'/img/simpleviewer.swf', 'flash-'+id, '900', '500', '9.0.124', false, flashvars, params);
    }
    SexyLightbox.display('#TB_inline?inlineId=content-'+id+'&height=500&width=900&background=#DCDDDF');
} // lightbox

<?php $this->addScript('Ext.onReady(function() { init(); });'); ?>
</script>